<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 1.导入echarts -->
    <script src="./echarts.js"></script>
  </head>
  <body>
    <!-- 2.写HTML结构 -->
    <div id="main" style="width: 800px;height:400px;"></div>

    <script type="text/javascript">
      /* 3.js初始化 ： 给图表添加数据  */

      //3.1 基于准备好的dom，初始化echarts实例
      //让你的图标数据 和 页面盒子进行绑定
      let myChart = echarts.init(document.getElementById('main'))

      //3.2 指定图表的配置项和数据
      // 设置图表的样式和 数据
      let option = {
        //顶部小标题提示
        // legend: {
        //   top: 'top'
        // },
        //右上角工具箱
        // toolbox: {
        //   show: true,
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        //图表颜色
        color: [
          '#132',
          '#f6f',
          '#6a7788',
          '#d116c3',
          '#768f18',
          '#b52b88',
          '#ae1ed0',
          '#63453f'
        ],
        //图表内容(必须)
        series: [
          {
            name: '点位分布',
            type: 'pie',
            //控制内圆 和 外圆的半径大小
            radius: ['10%', '90%'],
            //控制圆心位置
            center: ['50%', '50%'],
            //扇形高度会随着数据变化而变化
            roseType: 'area',
            //控制扇形圆角大小
            itemStyle: {
              // borderRadius: 8
            },
            //表格数据
            data: [
              {
                value: 40,
                name: '湖北',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#83bfa6' },
                    { offset: 0.5, color: '#188df0' },
                    { offset: 1, color: '#188df0' }
                  ])
                },
              },
              { value: 28, name: '云南' },
              { value: 22, name: '北京' },
              { value: 20, name: '山东' },
              { value: 28, name: '河北' },
              { value: 16, name: '江苏' },
              { value: 22, name: '浙江' },
              { value: 28, name: '四川' }
            ]
          }
        ]
      }

      //3.3 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    </script>
  </body>
</html>
